<template>
  <!--   -->
  <view class="index_all" @touchstart="startTouch" @touchend="endTouch" @click='clickView'>
    <search id='1111'></search>
    <!-- 12个推荐歌单 -->
    <view class="index_songlist_love">

      <view>
        <text>你的推荐歌单</text>
        <uni-icons type="more-filled" color="#7A7A7A" size="25"></uni-icons>
      </view>

      <view class="index_songlist_12">

        <view>
          <view v-for="item,index in songList_12_top" :key="index" @click="checkList(item.dissid)">
            <image :src="item.imgurl"></image>
            <text>{{item.dissname}}</text>
          </view>
        </view>
        <view>
          <view v-for="item,index in songList_12_bottom" :key="index" @click="checkList(item.dissid)">
            <image :src="item.imgurl"></image>
            <text>{{item.dissname}}</text>
          </view>
        </view>

      </view>

    </view>

    <!-- 30首大家都在听 -->
    <view class="index_18_play">

      <view class="index_title">
        <text>大家都在听</text>
        <uni-icons type="more-filled" color="#7A7A7A" size="25"></uni-icons>
      </view>

      <view class="index_18_play_all">

        <view>
          <view v-for="item,index in muscilist_top" :key="index" @click="play_music(item.mid,item.name,item.singer[0].name)">
            <view class="index_18_play_one">
              <image :src="'https://y.gtimg.cn/music/photo_new/T002R300x300M000'+item.album.pmid+'.jpg'"></image>
              <view class="">
                <text>{{item.name}}</text>
                <text>{{item.singer[0].name==undefined?"无名":item.singer[0].name}}-{{item.album.name}}</text>
              </view>
              <image src="../../static/musicpage/like.png"></image>
            </view>
          </view>
        </view>

        <view>
          <view v-for="item,index in muscilist_middle" :key="index" @click="play_music(item.mid,item.name,item.singer[0].name)">
            <view class="index_18_play_one">
              <image :src="'https://y.gtimg.cn/music/photo_new/T002R300x300M000'+item.album.pmid+'.jpg'"></image>
              <view class="">
                <text>{{item.name}}</text>
                <text>{{item.singer[0].name==undefined?"无名":item.singer[0].name}}-{{item.album.name}}</text>
              </view>
              <image src="../../static/musicpage/like.png"></image>
            </view>
          </view>
        </view>

        <view>
          <view v-for="item,index in muscilist_bottom" :key="index" @click="play_music(item.mid,item.name,item.singer[0].name)">
            <view class="index_18_play_one">
              <image :src="'https://y.gtimg.cn/music/photo_new/T002R300x300M000'+item.album.pmid+'.jpg'"></image>
              <view class="">
                <text>{{item.name}}</text>
                <text>{{item.singer[0].name==undefined?"无名":item.singer[0].name}}-{{item.album.name}}</text>
              </view>
              <image src="../../static/musicpage/like.png"></image>
            </view>
          </view>
        </view>

      </view>

    </view>

    <!-- 6个更多歌单 -->
    <view class="index_six_songlist">
      <view class="index_title">
        <text>热门歌单</text>
        <uni-icons type="more-filled" color="#7A7A7A" size="25"></uni-icons>
      </view>

      <view class="six_songlist_all">
        <view v-for="item,index in songlist_6_one" :key="index" @click="checkList(item.dissid)">
          <image :src="item.imgurl"></image>
          <text>{{item.dissname}}</text>
        </view>
      </view>
    </view>

    <!-- 9个宝藏歌单 -->
    <view class="index_nine_ailist">
      <view class="index_title">
        <text>推荐给你的宝藏歌单</text>
        <uni-icons type="more-filled" color="#7A7A7A" size="25"></uni-icons>
      </view>

      <view class="nine_songlist_all">
        <view v-for="item,index in songlist_9_two" :key="index" @click="checkList(item.dissid)">
          <image :src="item.imgurl"></image>
          <text>{{item.dissname}}</text>
        </view>
      </view>

    </view>

    <!-- 30首推荐歌曲 -->
    <view class="index_12_play">

      <view class="index_title">
        <text>热门歌曲</text>
        <uni-icons type="more-filled" color="#7A7A7A" size="25"></uni-icons>
      </view>

      <view class="index_18_play_all">

        <view>
          <view v-for="item,index in muscilist_shang" :key="index" @click="play_music(item.mid,item.name,item.singer[0].name)">
            <view class="index_18_play_one">
              <image :src="'https://y.gtimg.cn/music/photo_new/T002R300x300M000'+item.album.pmid+'.jpg'"></image>
              <view class="">
                <text>{{item.name}}</text>
                <text>{{item.singer[0].name==undefined?"无名":item.singer[0].name}}-{{item.album.name}}</text>
              </view>
              <image src="../../static/musicpage/like.png"></image>
            </view>
          </view>
        </view>

        <view>
          <view v-for="item,index in muscilist_zhong" :key="index" @click="play_music(item.mid,item.name,item.singer[0].name)">
            <view class="index_18_play_one">
              <image :src="'https://y.gtimg.cn/music/photo_new/T002R300x300M000'+item.album.pmid+'.jpg'"></image>
              <view class="">
                <text>{{item.name}}</text>
                <text>{{item.singer[0].name==undefined?"无名":item.singer[0].name}}-{{item.album.name}}</text>
              </view>
              <image src="../../static/musicpage/like.png"></image>
            </view>
          </view>
        </view>

        <view>
          <view v-for="item,index in muscilist_xia" :key="index" @click="play_music(item.mid,item.name,item.singer[0].name)">
            <view class="index_18_play_one">
              <image :src="'https://y.gtimg.cn/music/photo_new/T002R300x300M000'+item.album.pmid+'.jpg'"></image>
              <view class="">
                <text>{{item.name}}</text>
                <text>{{item.singer[0].name==undefined?"无名":item.singer[0].name}}-{{item.album.name}}</text>
              </view>
              <image src="../../static/musicpage/like.png"></image>
            </view>
          </view>
        </view>

      </view>
    </view>

    <!-- 无限刷歌单 -->
    <view class="index_all_songlist">
      <view class="index_title">
        <text>更多为你推荐</text>
        <uni-icons type="more-filled" color="#7A7A7A" size="25"></uni-icons>
      </view>
      
      <view class="all_songlist_row">
        
        <view class="all_songlist_column">
          <view class="all_songlist_column_one" @click="checkList(item.dissid)" v-for="item,index in musci_infinite_left" :key="index">
            <image :src="item.imgurl" mode=""></image>
            <text>{{item.dissname}}</text>
          </view>
        </view>
        <view class="all_songlist_column">
          <view class="all_songlist_column_one" @click="checkList(item.dissid)" v-for="item,index in musci_infinite_right" :key="index">
            <image :src="item.imgurl" mode=""></image>
            <text>{{item.dissname}}</text>
          </view>
        </view>
        
      </view>
    </view>

    <view style="margin: 50rpx;">
      color
    </view>
    <music ></music>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        song_play_static: true,
        hidden: true,
        clientX: 0,
        clientY: 0,
        show_page: 1,
        show_anther_page: 2,
        show_infinite_page: 3,
        songList_12_top: [],
        songList_12_bottom: [],
        songlist_6_one: [],
        songlist_9_two: [],
        muscilist_top: [],
        muscilist_middle: [],
        muscilist_bottom: [],
        muscilist_shang: [],
        muscilist_zhong: [],
        muscilist_xia: [],
        musci_infinite_left: '',
        musci_infinite_right: '',

      }
    },
    onReady: async function() {
      uni.showLoading({
        title: "获取数据中,请稍等",
        mask: true
      })
      let {
        data: {
          data: {
            list
          }
        }
      } = await uni.$http.get("songlist/list?pageSize=12&pageNo=" + this.show_page)
        //获取推荐歌单并放入变量
      this.songList_12_top = list.splice(0, 6)
      this.songList_12_bottom = list.splice(0, 6)
      let song_t = await uni.$http.get("new/songs?type=1")
      this.muscilist_top = await song_t.data.data.list.splice(0, 10)
      this.muscilist_middle = await song_t.data.data.list.splice(0, 10)
      this.muscilist_bottom = await song_t.data.data.list.splice(0, 10)
      this.muscilist_shang = await song_t.data.data.list.splice(0, 10)
      this.muscilist_zhong = await song_t.data.data.list.splice(0, 10)
      this.muscilist_xia = await song_t.data.data.list.splice(0, 10)
      let songlist = await uni.$http.get("songlist/list?pageSize=15&pageNo=" + this.show_anther_page)
        //获取歌曲推荐并放入变量
      this.songlist_6_one = songlist.data.data.list.splice(0, 6)
      this.songlist_9_two = songlist.data.data.list.splice(0, 9)
      uni.hideLoading()
    },

    methods: {
      
      checkList(id){
        uni.navigateTo({
          url:"/pages/songlist/songlist?id="+id
        })
      },
      
      play_music(id,name,singer){
        this.$clickPlayMusic(id,name,singer)
      },

      clickView(e) { //点击页面
        if (e.target.id == 1111) { //判断点击了搜索框
          uni.navigateTo({
            url: "/pages/search/search"
          })
        }
      },
      startTouch(e) { //@touchstart 触摸开始
        this.clientX = e.changedTouches[0].clientX; //手指按下时的X坐标         
        this.clientY = e.changedTouches[0].clientY; //手指按下时的Y坐标
      },
      endTouch:async function(e) { //@touchend触摸结束
        //在事件结束时，左右滑動退出搜索状态
        if ((this.clientY - e.changedTouches[0].clientY) > 50) {
          console.log("向下")
          let songlist_last = await uni.$http.get("songlist/list?pageSize=16&pageNo=" + this.show_infinite_page)
             //获取歌单推荐并放入变量
          if(this.musci_infinite_left==""){
              this.musci_infinite_left=songlist_last.data.data.list.splice(0,8)
              this.musci_infinite_right=songlist_last.data.data.list.splice(0,8)
          }else {
            console.log(this.musci_infinite_right,this.musci_infinite_left)
            this.musci_infinite_left.push(await {...songlist_last.data.data.list.splice(0,1)}[0])
            this.musci_infinite_left.push(await {...songlist_last.data.data.list.splice(0,1)}[0])
            this.musci_infinite_left.push(await {...songlist_last.data.data.list.splice(0,1)}[0])
            this.musci_infinite_left.push(await {...songlist_last.data.data.list.splice(0,1)}[0])
            this.musci_infinite_left.push(await {...songlist_last.data.data.list.splice(0,1)}[0])
            this.musci_infinite_left.push(await {...songlist_last.data.data.list.splice(0,1)}[0])
            this.musci_infinite_left.push(await {...songlist_last.data.data.list.splice(0,1)}[0])
            this.musci_infinite_left.push(await {...songlist_last.data.data.list.splice(0,1)}[0])
            this.musci_infinite_right.push(await {...songlist_last.data.data.list.splice(0,1)}[0])
            this.musci_infinite_right.push(await {...songlist_last.data.data.list.splice(0,1)}[0])
            this.musci_infinite_right.push(await {...songlist_last.data.data.list.splice(0,1)}[0])
            this.musci_infinite_right.push(await {...songlist_last.data.data.list.splice(0,1)}[0])
            this.musci_infinite_right.push(await {...songlist_last.data.data.list.splice(0,1)}[0])
            this.musci_infinite_right.push(await {...songlist_last.data.data.list.splice(0,1)}[0])
            this.musci_infinite_right.push(await {...songlist_last.data.data.list.splice(0,1)}[0])
            this.musci_infinite_right.push(await {...songlist_last.data.data.list.splice(0,1)}[0])
          }
          this.show_infinite_page++
        }else if((e.changedTouches[0].clientY-this.clientY ) > 50){
          console.log("向上")
        }
      }

    },

    onHide() {
      console.log("my 页面隐藏")
      uni.$emit("clearnInput", '')
      this.hidden = true
    }
  }
</script>

<style lang="scss">
  @mixin _flex($flex) {
    display: flex;
    flex-direction: $flex;
  }

  @mixin font_bold {
    // 加粗字体
    font-size: 33rpx;
    font-weight: bold;
  }

  @mixin scroll {

    /* 更改滚动条大小 */
    &::-webkit-scrollbar {
      display: none;
      width: 0;
      height: 0;
      color: transparent;
    }
  }

  .index_title {
    height: 50rpx;
    width: 90%;
    margin: 0 auto;
    @include _flex(row);
    align-items: center;
    justify-content: space-between;
    color: white;

    >text {
      @include font_bold();
    }
  }

  .index_all {
    margin-bottom: 100px;
    width: 100vw;
    height: 100vh;
    overflow-y: scroll;
    @include scroll()
  }

  //12个推荐歌单
  .index_songlist_love {
    @include _flex(column);
    margin: 25rpx 0 25rpx 5%;
    color: white;

    >view:nth-child(1) {
      width: 95%;
      @include _flex(row);
      align-items: center;
      justify-content: space-between;

      >text {
        @include font_bold();
      }
    }

    // 12个歌单的样式
    >.index_songlist_12 {
      margin-top: 20rpx;
      overflow-x: scroll;
      height: 600rpx;

      @include _flex(column) @include scroll()>view {
        width: 205rpx;
        height: 300rpx;
        @include _flex(row) justify-content: space-between;

        >view {
          margin-left: 10%;
          @include _flex(column) width: 205rpx;
          height: 300rpx;

          >image {
            border-radius: 15rpx;
            width: 205rpx;
            height: 210rpx;
          }

          >text {
            line-height: 30rpx;
            margin: 24rpx 0;
            font-size: 27rpx;
            width: 205rpx;
            height: 70rpx;
            overflow: hidden;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
            box-orient: vertical;
            display: -webkit-box;
            display: box;
          }
        }

        >view:nth-child(1) {
          margin: 0;
        }
      }
    }
  }

  //30首大家都在听的歌曲
  .index_18_play {
    height: 560rpx;
    color: white;

    >.index_title {
      height: 50rpx;
      width: 90%;
      margin: 0 auto;
      @include _flex(row);
      align-items: center;
      justify-content: space-between;

      >text {
        @include font_bold();
      }
    }

    >.index_18_play_all {
      margin-left: 5%;
      height: 510rpx;
      @include _flex(column) overflow-x: scroll;
      @include scroll() //竖向三行

      >view {
        //横向10列
        margin: 15rpx 0;
        height: 140rpx;

        @include _flex(row)>view {
          width: 675rpx;

          @include _flex(row)>.index_18_play_one {
            width: 675rpx;
            align-items: center;

            @include _flex(row)>image:nth-child(1) {
              border-radius: 12rpx;
              width: 130rpx;
              height: 130rpx;
            }

            >image:nth-child(3) {
              margin: 0 auto;
              width: 60rpx;
              height: 60rpx;
            }

            >view {
              @include _flex(column) margin: 30rpx;
              width: 350rpx;
              height: 100rpx;

              >text {
                line-height: 50rpx;
                font-size: 27rpx;
                width: 350rpx;
                height: 100rpx;
               overflow: hidden;
               -webkit-line-clamp: 1;
               line-clamp: 1;
               -webkit-box-orient: vertical;
               box-orient: vertical;
               display: -webkit-box;
               display: box;
              }
            }
          }
        }
      }
    }
  }

  //6个更多歌单
  .index_six_songlist {
    @include _flex(column) margin-top: 40rpx;

    >.six_songlist_all {
      overflow-y: scroll;
      margin: 20rpx 0 0 5%;
      color: white;
      height: 300rpx;

      @include _flex(row) @include scroll()>view {
        margin-left: 10%;
        @include _flex(column) width: 205rpx;
        height: 300rpx;

        >image {
          border-radius: 15rpx;
          width: 205rpx;
          height: 210rpx;
        }

        >text {
          line-height: 30rpx;
          margin: 24rpx 0;
          font-size: 27rpx;
          width: 205rpx;
          height: 70rpx;
          overflow: hidden;
          -webkit-line-clamp: 2;
          line-clamp: 2;
          -webkit-box-orient: vertical;
          box-orient: vertical;
          display: -webkit-box;
          display: box;
        }
      }

      >view:nth-child(1) {
        margin: 0;
      }
    }
  }

  // 9个宝藏歌单
  .index_nine_ailist {
    margin-top: 30rpx;

    @include _flex(column)>.nine_songlist_all {
      overflow-y: scroll;
      margin: 20rpx 0 0 5%;
      color: white;
      height: 300rpx;

      @include _flex(row) @include scroll()>view {
        margin-left: 10%;
        @include _flex(column) width: 205rpx;
        height: 300rpx;

        >image {
          border-radius: 15rpx;
          width: 205rpx;
          height: 210rpx;
        }

        >text {
          line-height: 50rpx;
          margin: 24rpx 0;
          font-size: 27rpx;
          width: 205rpx;
          height: 70rpx;
          overflow: hidden;
          -webkit-line-clamp: 2;
          line-clamp: 2;
          -webkit-box-orient: vertical;
          box-orient: vertical;
          display: -webkit-box;
          display: box;
        }
      }

      >view:nth-child(1) {
        margin: 0;
      }
    }
  }

  //30首推荐歌曲
  .index_12_play {
    margin-top: 35rpx;
    height: 560rpx;
    color: white;

    >.index_18_play_all {
      margin-left: 5%;
      height: 510rpx;
      @include _flex(column) overflow-x: scroll;
      @include scroll() //竖向三行

      >view {
        //横向10列
        margin: 15rpx 0;
        height: 140rpx;

        @include _flex(row)>view {
          width: 675rpx;

          @include _flex(row)>.index_18_play_one {
            width: 675rpx;
            align-items: center;

            @include _flex(row)>image:nth-child(1) {
              border-radius: 12rpx;
              width: 130rpx;
              height: 130rpx;
            }

            >image:nth-child(3) {
              margin: 0 auto;
              width: 60rpx;
              height: 60rpx;
            }

            >view {
              @include _flex(column) margin: 30rpx;
              width: 350rpx;
              height: 100rpx;

              >text {
                line-height: 50rpx;
                font-size: 27rpx;
                width: 350rpx;
                height: 80rpx;
                overflow: hidden;
                -webkit-line-clamp: 1;
                line-clamp: 1;
                -webkit-box-orient: vertical;
                box-orient: vertical;
                display: -webkit-box;
                display: box;
              }
            }
          }
        }
      }
    }
  }
  
  //无限刷两列歌单
  .index_all_songlist {
    width: 100%;
    color: white;
    margin-top: 35rpx;
    @include _flex(column)
    
    .all_songlist_row {
      width: 90%;
      margin: 20rpx auto 0 auto;
      justify-content: space-between;
      @include _flex(row)
      
      .all_songlist_column {
        @include _flex(column)
        
        .all_songlist_column_one {
          @include _flex(column)
          width: 325rpx;
          height: 410rpx;
            
          > image {
            border-radius: 15rpx ;
            width: 325rpx;
            height: 370rpx;
          }
          >text {
            line-height: 30rpx;
            margin: 15rpx 0;
            font-size: 27rpx;
            width: 325rpx;
            height: 70rpx;
            overflow: hidden;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
            box-orient: vertical;
            display: -webkit-box;
            display: box;
          }
        }
        > .all_songlist_column_one {
            right: 20rpx;
        }
      }
    }
  }
</style>
